<template>
	<div class="pages-container">
		<div class="containerx-box">
			<div class="container-header flex_between">
				<div class=""> 
					<span class="bold font_size16">{{ currentMenu.text }} </span>
					<span class="font_size12 font_black7" v-if="isShowAddBtn.id != 'print' && isShowAddBtn.id != 'wxCode'">（选中模版可编辑模版） </span>
				</div>
				<div class="flex1" style="text-align: right;">
					<el-button v-if="isShowAddBtn.isAdd" type="primary" size="mini" icon="el-icon-plus"
						@click="handleAdd(isShowAddBtn.id)">新建{{ isShowAddBtn.text }}{{ isShowAddBtn.id != 'print' ?
							'模版' : '' }}</el-button>
				</div>
			</div>
			<div class="containerx-body">
				<template v-if="currentComponent">
					<component :is="currentComponent" :key="currentMenu.id" :currentMenu="currentMenu"
						:propData="propData" @success-handle="successHandle" ref="componentRef" />
				</template>
				<div v-else class="error-message">
					<p>未找到对应的设置组件</p>
					<p v-if="currentMenu.id" class="error-detail">组件 ID: {{ currentMenu.id }}</p>
				</div>
			</div>
		</div>
		<el-drawer :visible.sync="drawerRights" :modal="false" :size="'70%'"
			:title="'新建' + isShowAddBtn.text + (isShowAddBtn.id != 'print' ? '模版' : '')">
			<div class="drawer-content-wrapper" style="padding:0 20px 20px;height: 100%;">
				<customFormCopy
					style="flex: 1;min-height: 0;"
					ref="customsFormRef"
					:currentMenu="currentMenu"
					:propData="propData"
					:isShowPrivew="false"
					@success-handle="customFormSuccessHandle"
				>
				</customFormCopy>
			</div>
		</el-drawer>
	</div>
</template>
<script setup>
import {
	ref,
	onMounted,
	onBeforeUnmount,
	nextTick,
	defineExpose,
	defineEmits,
	computed,
	defineProps,
	getCurrentInstance,
	watch,
	provide,
} from '@vue/composition-api'
const { proxy } = getCurrentInstance()

import print from "./printSettingModule/print.vue"
import wxCode from "./printSettingModule/wxCode.vue"
import xs from "./printSettingModule/xs.vue"
import cg from "./printSettingModule/cg.vue"
import ck from "./printSettingModule/ck.vue"
import rk from "./printSettingModule/rk.vue"
import db from "./printSettingModule/db.vue"
import yy from "./printSettingModule/yy.vue"
import customFormCopy from "@/pages/setting/module/basicSetting/printSettingModule/com/customFormCopy.vue"

const props = defineProps({
	currentMenu: {
		type: Object,
		default: () => ({})
	},
	propData: {
		type: Object,
		default: () => ({})
	}
})
const emit = defineEmits(['success-handle'])
const successHandle = (data) => {
	emit('success-handle', data)
}
const isShowAddBtn = computed(() => {
	return menuList.value.find(item => item.id == props.currentMenu.id)
})
const componentMap = {
	'print': print, // 打印设置
	'wxCode': wxCode, // 小程序码
	'xs': xs, // 销售
	'cg': cg, // 采购
	'ck': ck, // 出库
	'rk': rk, // 入库
	'db': db, // 调拨
	'yy': yy, // 预约
}

const menuList = ref([
	{
		id: 'print',
		text: '打印机',
		isAdd: true
	}, {
		id: 'wxCode',
		text: '小程序码'
	},
	{
		id: 'xs',
		text: '销售单',
		isAdd: true
	}, {
		id: 'cg',
		text: '采购单',
		isAdd: true
	}, {
		id: 'ck',
		text: '出库单',
		isAdd: true
	}, {
		id: 'rk',
		text: '入库单',
		isAdd: true
	}, {
		id: 'db',
		text: '调拨单',
		isAdd: true
	}, {
		id: 'yy',
		text: '预约单',
		isAdd: true
	},
])

const handleAddData = ref({})
const drawerRights = ref(false)
const customsFormRef = ref(false)
provide('printHandleAdd', handleAddData)
const handleAdd = (type) => {
	if (type == 'print') {
		proxy.$refs.componentRef.handleAdd()
	} else {
		// handleAddData.value = { type, timestamp: Date.now() }
		drawerRights.value = true
		nextTick(() => {
			proxy.$refs.customsFormRef.handleAddTplDetail()
		})
	}
}

const currentComponent = computed(() => {
	const menuId = props.currentMenu?.id
	if (!menuId) {
		return null
	}
	const component = componentMap[menuId]
	if (!component) {
		return null
	}
	return component
})

const customFormSuccessHandle = (data) => {
	drawerRights.value = false
}

</script>

<style scoped lang="scss">
.pages-container {
	box-sizing: border-box;
	flex: 1;
	display: flex;
	height: 100%;

	.containerx-box {
		/* 玻璃透明白色效果 */
		background: rgba(255, 255, 255, 0.7);
		backdrop-filter: blur(20px);
		-webkit-backdrop-filter: blur(20px);
		border: 1px solid rgba(245, 232, 232, 0.9);
		height: calc(100% - 10px);
		width: 100%;
		border-radius: 6px;
		overflow: hidden;
		/* 防止整体容器溢出 */
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.container-header {
			box-sizing: border-box;
			border-bottom: 1px solid #e1e8ed;
			padding: 0 14px;
			height: 42px;
			display: flex;
			align-items: center;
		}

		.containerx-body {
			box-sizing: border-box;
			padding: 10px;
			flex: 1;
			/* 关键修复：设置高度为0，让flex-grow生效 */
			height: 0;
			/* 确保flex项可以收缩 */
			min-height: 0;

			.error-message {
				text-align: center;
				padding: 40px 20px;
				color: #999;

				p {
					margin: 10px 0;
					font-size: 14px;
				}

				.error-detail {
					font-size: 12px;
					color: #ccc;
				}
			}
		}
	}
}

</style>